<!DOCTYPE html>
<html>
<head><#include "/common/common.ftl" parse=true encoding="utf-8">
<link href="${base}/styles/css/module/module-course.css" rel="stylesheet">
<style>
.input-wrapper {
	margin-bottom: 10px;
	margin-right: 110px;
	width: 230px;
	float: right;
}

.keyword-wrapper {
	padding-top: 1px;
	padding-left: 10px;
	background-color: #fff;
	height: 30px;
	widht: 100%;
}

#keyword {
	font-size: 12px;
	padding: 2px 2px;
	border-style: solid;
	border-width: 0px;
	border-color: #000;
	border-bottom: 0px;
}

#submit {
	margin-left: 40px;
	border-style: solid;
	border-width: 0px;
	border-color: #000;
	background-color: #fff;
}

.p-jtjs {
	margin-top: 10px;
	font-size: 17px;
}

#submit {
	text-align: left
}

#post_container li {
	margin-bottom: 30px;
	width: 200px;
}

hr {
	margin-top: 5px;
	margin-bottom: 5px;
	border-bottom: 1px solid #000;
}

.col-md-12 {
	padding-left: 0px;
}

.defaultImg {
	background-color: #3E91EF;
	padding-right: 1px;
	height: 125px;
	width: 200px;
}

.thumbnail {
	padding: 0px 0px;
}

.thumbnail a {
	height: 130px;
	display: block;
	padding: 0px 0px 0;
}

.thumbnail img {
	width: 200px;
}

.move {
	transform: none;
	-webkit-transition: -webkit-transform 0.5s;
	transition: transform 0.5s;
	width: 200px;
	height: 90px;
	padding-top: 10px;
	padding-left: 5px;
	background-color: #fff;
	position: absolute;
}

.post:hover .move {
	-webkit-transform: translateY(0);
	transform: translateY(0);
	transform: translateY(-35px);
}

.article {
	position: relative;
	height: 90px;
}

.info {
	border-top: 0px
}

.name {
	font-weight: lighter;
	font-size: 15px;
	font-weight: 500;
}

#post_container .fixed-hight .info {
	height: 70px;
}

.move p{
	color:#999;
}

p {
	text-align: left
}
</style>
</head>
<body>
<#include "/common/header.ftl" parse=true encoding="utf-8">

	<div class="container">
		<div class="row" style="margin-top: 5px;">
			<div id="myCarousel" class="carousel slide">
				<!-- 轮播（Carousel）指标 -->
				<ol class="carousel-indicators">
					<li data-target="#myCarousel" data-slide-to="0" class="active"></li>
					<li data-target="#myCarousel" data-slide-to="1"></li>
					<li data-target="#myCarousel" data-slide-to="2"></li>
				</ol>
				<!-- 轮播（Carousel）项目 -->
				<div class="carousel-inner">
					<div class="item active">
						<a href="${base}/course/3/detail.html"><img src="${base}/styles/images/ad/ad1.jpg" alt="ad1" class="text-center"  ></a>
					</div>
					<div class="item">
						<a href="${base}/course/3/detail.html"><img src="${base}/styles/images/ad/ad2.jpg" alt="ad2" class="text-center" ></a>
					</div>
					<div class="item">
						<a href="${base}/course/3/detail.html"><img src="${base}/styles/images/ad/ad3.jpg" alt="ad3" class="text-center" ></a> 
					</div>
				</div>
				<!-- 轮播（Carousel）导航 -->
				<a class="carousel-control left" href="#myCarousel"
					data-slide="prev">&lsaquo; </a> <a class="carousel-control right"
					href="#myCarousel" data-slide="next">&rsaquo; </a>
			</div>
		</div>


		<div class="row">
			<div>
				<h1 class="col-sm-10 col-md-8">热门课程</h1>
				<a href="${base}/course/search.html" target="_blank" class="text-right col-sm-2 col-md-4"><span>更多</span></a>
			</div>
		</div>

		<div class="row">
			<#if hotCourseList??&&(hotCourseList?size>0)>
				<ul id="post_container" class="masonry clearfix col-md-offset-1">
					<#list hotCourseList as course>
						<li class="post box row fixed-hight">
							<div class="thumbnail">
								<a href="${base}/course/${course.id!}/detail.html" class="zoom" rel="bookmark" target="_blank" title="${course.name!}">
									<div class="defaultImg">
										<#if (course.picUrl??) && (course.picUrl != "")>
										<img width="200" height="125" src="${base}/io/uploadPreviewAction.do?filename=${course.picUrl!}"   class="attachment-thumbnail size-thumbnail wp-post-image" sizes="(max-width: 300px) 100vw, 300px">
										<#else>
											<img width="200" height="125" src="${base}/styles/images/common/logo_white_big.png" class="attachment-thumbnail size-thumbnail wp-post-image" sizes="(max-width: 300px) 100vw, 300px">
										</#if>
										
									</div>
									<div class="zoomOverlay"></div>
								</a>
							</div>
							<div class="move">
								<span class="name"> <a href="${base}/course/${course.id!}/detail.html" rel="bookmark" target="_blank" title="${course.name!}" >${course.name!}</a>
								</span>
								<br>
								<span><font style="font-size: 5px;">${course.intro!}</font></span>
							</div>
							<div class="article"></div>
							<div class="info">
								<p>
									<span>${course.viewCount!}人查看</span>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<span>${course.commentCount!}人评论</span>
								</p>
								<p>
									<span>发布时间：${course.createTime!}</span> 
								</p>
							</div>
						</li>
					</#list>
				</ul>
			<#else>
				暂无热门课程
			</#if>
		</div>
		
	</div>

	<#include "/common/footer.ftl" parse=true encoding="utf-8">
</body>
</html>